<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 国产360浏览器默认采用高速模式渲染页面 -->
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>iframe application</title>
    <link rel="shortcut icon" href="./favicon.ico" type="image-x-icon">
    <link rel="stylesheet" href="./css/reset.min.css">
    <link rel="stylesheet" type="text/css" href="./css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="./css/importer.min.css">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="lib/html5shiv.min.js"></script>
      <script src="lib/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="app-main-container">
      <nav id="menuWrapper" class="app-menu-wrapper">
        <div class="menu-toggle-wrapper">
          <i id="btnToggleMenu" class="fa fa-list"></i>
        </div>
        <ul class="menus">
          <li class="menu">
            <i class="fa fa-glass"></i>
            <span data-route-name="rainbow" class="title">Vue作者博客的彩色条纹</span>
          </li>
          <li class="menu">
            <i class="fa fa-cog"></i>
            <span data-route-name="city" class="title">不重复的颜色</span>
          </li>
          <li class="menu">
            <i class="fa fa-file-image-o"></i>
            <span data-route-name="particles" class="title">粒子效果</span>
          </li>
          <li class="menu">
            <i class="fa fa-file-image-o"></i>
            <span data-route-name="guess" class="title">猜字母游戏</span>
          </li>
        </ul>
      </nav>
      <article class="app-iframe-wrapper">
        <iframe id="appIframe" class="app-content-wrapper" src="" frameborder="0"></iframe>
      </article>
    </div>
    <script src="./lib/jquery.min.js"></script>
    <script src="./lib/handlebars-v4.0.5.min.js"></script>
    <script>
      var $menuWrapper = $('#menuWrapper')
      var $appIframe = $('#appIframe')
      var $menusWrapper = $('#menuWrapper .menus')
      var $menus = $('#menuWrapper .menu')
      var $btnToggleMenu = $('#btnToggleMenu')

      // 自定义路由
      var routesConfig = {
        rainbow: './pages/rainbow/index.html',
        city: './pages/city/index.html',
        guess: './pages/guess/index.html',
        particles: './pages/particles/index.html'
      }
      function Route (routesConfig) {
        this.routers = routesConfig
      }
      Route.prototype.go = function (options) {
        var routeName = options.path
        window.location.hash = '#' + routeName

        var targetUrl = this.routers[routeName]
        $appIframe.prop('src', targetUrl)

        $menus.removeClass('active')
        $menus.find('span[data-route-name=' + routeName + ']').parents('.menu').addClass('active')
      }
      var router = new Route(routesConfig)

      $menuWrapper.on('click', '.menu', function (e) {
        var $this = $(this)
        var routeName = $this.find('.title').data('route-name')
        router.go({ path: routeName })
      })

      $btnToggleMenu.click(function () {
        $menusWrapper.toggleClass('show')
      })

      window.addEventListener('load', function () {
        var hash = window.location.hash.replace('#', '')
        if (Object.keys(routesConfig).indexOf(hash) === -1) {
          router.go({ path: 'particles' })
        } else {
          router.go({ path: hash })
        }
      }, false)
    </script>
  </body>
</html>
